<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<style>
* {
	margin: 0;
	padding: 0;
	outline: none;
	webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #eee;
	color: #444;
	-webkit-font-smoothing: antialiased;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 15px;
	font-weight: 400;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	text-rendering: optimizeLegibility
}

div.wrapper {
	margin: 20px auto;
	width: 350px;
}

p {
	font-family: georgia;
	font-size: 1rem;
	line-height: 25px;
	margin: 24px 0;
	text-align: le;
}

nav.vertical {
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	overflow: hidden;
	text-align: center;
}

nav.vertical>ul {
	list-style-type: none;
}

nav.vertical>ul>li {
	display: block;
}

nav.vertical>ul>li>label,nav.vertical>ul>li>a {
	background-color: rgb(157, 34, 60);
	background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98),
		rgb(157, 34, 60));
	background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98),
		rgb(157, 34, 60));
	background-image: -o-linear-gradient(135deg, rgb(114, 51, 98),
		rgb(157, 34, 60));
	background-image: linear-gradient(135deg, rgb(114, 51, 98),
		rgb(157, 34, 60));
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px
		rgba(0, 0, 0, .1);
	color: rgb(255, 255, 255);
	display: block;
	font-size: .75rem;
	font-weight: bold;
	height: 50px;
	letter-spacing: .2rem;
	line-height: 50px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	text-transform: capitalize;
	transition: all .1s ease;
}

nav.vertical>ul>li>label:hover,nav.vertical>ul>li>a:hover {
	background-color: rgb(114, 51, 98);
	background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98),
		rgb(114, 51, 98));
	background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98),
		rgb(114, 51, 98));
	background-image: -o-linear-gradient(150deg, rgb(114, 51, 98),
		rgb(114, 51, 98));
	background-image: linear-gradient(150deg, rgb(114, 51, 98),
		rgb(114, 51, 98));
	cursor: pointer;
}

nav.vertical>ul>li>label+input {
	display: none;
	visability: hidden;
}

nav.vertical>ul>li>div {
	background-color: rgb(255, 255, 255);
	max-height: 0;
	overflow: hidden;
	transition: all .5s linear;
}

nav.vertical>ul>li>label+input:checked+div {
	max-height: 600px;
}

nav.vertical>ul>li>div>ul {
	list-style-type: none;
}

nav.vertical>ul>li>div>ul>li>a {
	background-color: rgb(255, 255, 255);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	color: #333331;
	display: block;
	font-size: 0.8rem;
	padding: 10px 0;
	text-decoration: none;
	transition: all 0.15s linear;
}

nav.vertical>ul>li>div>ul>li:hover>a {
	background-color: lightBlue;
	color: rgb(255, 255, 255);
	padding: 10px 0 10px 50px;
}
</style>
</h:head>
<body>
	<nav class="vertical">
		<ul>
			<li><label for="prop">Propietario</label> <input type="radio"
				name="verticalMenu" id="prop" />
				<div>
					<ul>
						<li><a href="Salon.xhtml">Salón</a></li>
						<li><a href="Reg_Propietario.xhtml">Propietario</a></li>
						<li><a href="#">Asignar Servicios a Salón</a></li>
						<li><a href="#">Asignar Menús a Salón</a></li>
						<li><a href="#">Asignar combos de bebidas a Salón</a></li>
						<li><a href="#">Asignar mesas a Salón</a></li>
						<li><a href="Promocion.xhtml">Asignar promociones a Salón</a></li>
						<li><a href="ImporteFijo.xhtml">Asignar importes fijos a Salón</a></li>
					</ul>
				</div></li>
			<li><label for="evento">Evento</label> <input type="radio"
				name="verticalMenu" id="evento" />
				<div>
					<ul>
						<li><a href="#">Agendar Cita</a></li>
						<li><a href="Presupuesto.xhtml">Generar Presupuesto</a></li>
						<li><a href="#">Gestionar Reserva</a></li>
						<li><a href="#">Contratación de Servicios</a></li>
						<li><a href="#">Invitados</a></li>
						<li><a href="#">Ubicación de Invitados</a></li>
						<li><a href="#">Generar Tarjetas Virtuales</a></li>
						<li><a href="#">Generar Pedido de Insumos</a></li>
						<li><a href="#">Contratación de Personal</a></li>
						<li><a href="#">Registrar Cobro</a></li>
						<li><a href="#">Registrar Reparaciones</a></li>
						<li><a href="#">Registrar Quejas y Reclamos</a></li>
						<li><a href="#">Movimientos de Mercadería</a></li>
						<li><a href="#">Roturas y Extravíos</a></li>
						<li><a href="#">Registrar Conformidad de Servicio</a></li>
						<li><a href="#">Registrar diferencias en ejecución de evento</a></li>
												
						</ul>
					
				</div></li>

			<li><label for="compras">Compras</label> <input type="radio"
				name="verticalMenu" id="compras" />
			
					<div>
						<ul>
						<li><a href="#">Proveedor</a></li>
						<li><a href="#">Consultar Stock de Insumos</a></li>
						<li><a href="#">Generar Orden de Compras</a></li>
						<li><a href="#">Registrar Ingreso de Mercadería</a></li>
						<li><a href="#">Registrar Pago a Proveedor</a></li>
						<li><a href="#">Generar Contrato de Servicio de Personal</a></li>
						<li><a href="#">Generar Contrato Proveedor de Servicios</a></li>
						<li><a href="#">Generar Pedido de Insumos</a></li>
						
											
						</ul>
					
				</div></li>
			<li><label for="informes">Informes</label> <input type="radio"
				name="verticalMenu" id="informes" />
				<div>
					<ul>
						<li><a href="#">Informe de Reservas</a></li>
						<li><a href="#">Informe de Servicios</a></li>
						<li><a href="#">Informe de Salones</a></li>
						<li><a href="#">Informe de Menús más solicitados</a></li>
						<li><a href="#">Informe de Bebidas más solicitadas</a></li>
					</ul>
				</div></li>
			<li><label for="sistema">Sistema</label> <input type="radio"
				name="verticalMenu" id="sistema" />
				<div>
					<ul>
						<li><a href="#">Usuarios</a></li>
						<li><a href="#">Perfiles de usuario</a></li>
						<li><a href="#">Cambiar contraseña</a></li>
						<li><a href="#">Respaldo</a></li>
						<li><a href="#">Recuperación</a></li>
						<li><a href="#">Parámetros del sistema</a></li>
					</ul>
				</div></li>
				
				<li><label for="datos">Datos</label> <input type="radio"
				name="verticalMenu" id="datos" />
				<div>
					<ul>
					<li><a href="Menu.xhtml">Menús</a></li>
					<li><a href="ComboBebida.xhtml">Menús</a></li>
						<li><a href="ServicioProveedor.xhtml">Servicios por
								proveedor</a></li>
						<li><a href="Pais.xhtml">Paises</a></li>
						<li><a href="Provincia.xhtml">Provincias</a></li>
						<li><a href="Localidad.xhtml">Localidades</a></li>
						<li><a href="Barrio.xhtml">Barrios</a></li>
						<li><a href="cons_modif_bebidas.xhtml">Bebidas</a></li>
						<li><a href="Insumo.xhtml">Insumos</a></li>
		      			<li><a href="#">Tipos de Menús</a></li>
						<li><a href="#">Tipos de Proveedor</a></li>
						<li><a href="#">Tipos de Importes Fijos</a></li>
						<li><a href="#">Estado de propietario</a></li>
						<li><a href="#">Categorías de suscripción</a></li>
						<li><a href="#">Tipos de Mesas</a></li>
						<li><a href="#">Categorías de Bienes de Uso</a></li>

					</ul>
				</div></li>
		</ul>
	</nav>
</body>
</html>
